import React from 'react';
import {Col,Row,Steps,List, Avatar,Input,Button  } from "antd";
import './OrderInfo.css'

const { Step } = Steps;
const { TextArea } = Input;

class OrderInfo extends React.Component {
    constructor(props){
        super(props);
        this.state={
            orderInfo:JSON.parse(sessionStorage.getItem('toOrderInfo')),
            orderState:['待发货','已发货','待收货','已收货'],
            textValue:'',
            chatData : []
        }
    }
    //输入框的内容发生变化
    textChange=(e)=>{
        // console.log(e.target.value);
        this.changeState('textValue',e.target.value);
    };
    //改变state
    changeState=(name,value)=>{
        this.setState({
            [name]:value
        });
    };
    //点击发送
    toChat=()=>{
        let newChatData = [...this.state.chatData];
        newChatData.push({title: '客服',content:this.state.textValue});
        this.setState({
            chatData:newChatData
        })
    };
    render() {
        let num=0;
        this.state.orderState.forEach((item,index)=>{
            if (item===this.state.orderInfo.orderState){
                num = index;
            }
        });
        return (
            <div className='OrderInfoDiv'>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={8}>
                        <h3>订单进程</h3>
                        <Steps direction="vertical" current={num} size='small'>
                            <Step title={this.state.orderState[0]} />
                            <Step title={this.state.orderState[1]} />
                            <Step title={this.state.orderState[2]} />
                            <Step title={this.state.orderState[3]} />
                        </Steps>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <h3>订单信息</h3>
                        <table>
                            <tbody>
                            <tr>
                                <td>订单ID：</td>
                                <td>{this.state.orderInfo.orderId}</td>
                            </tr>
                            <tr>
                                <td>订单状态：</td>
                                <td>{this.state.orderInfo.orderState}</td>
                            </tr>
                            <tr>
                                <td>商品名称：</td>
                                <td>{this.state.orderInfo.goodsName}</td>
                            </tr>
                            <tr>
                                <td>商品ID：</td>
                                <td>{this.state.orderInfo.goodsId}</td>
                            </tr>
                            </tbody>

                        </table>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <h3>用户信息</h3>
                        <table>
                            <tbody>
                            <tr>
                                <td>收货人姓名：</td>
                                <td>{this.state.orderInfo.userName}</td>
                            </tr>
                            <tr>
                                <td>收货人手机：</td>
                                <td>{this.state.orderInfo.userTel}</td>
                            </tr>
                            <tr>
                                <td>收货人地址：</td>
                                <td>XX省XX市XX区XX路XX小区</td>
                            </tr>
                            <tr>
                                <td>物流单号：</td>
                                <td>{this.state.orderInfo.kuaiDiId}</td>
                            </tr>
                            </tbody>
                        </table>
                    </Col>
                </Row>
                {/*以下是聊天信息*/}
                <div className='chatDiv'>
                    <List size='small' itemLayout="horizontal" dataSource={this.state.chatData} renderItem={item => (
                        <List.Item>
                            <List.Item.Meta style={{textAlign:'left'}}
                                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                            title={item.title}
                                            description={item.content}
                            />
                        </List.Item>
                    )}
                    />
                </div>
                {/*以下是输入框*/}
                <div className='textDiv'>
                    <div>
                        <TextArea placeholder="请输入回复内容" allowClear={true} value={this.state.textValue} autoSize={{ minRows: 1, maxRows: 3 }} maxLength={50} onChange={this.textChange} />
                    </div>
                    <Button type="primary" onClick={this.toChat}>发送</Button>
                </div>
            </div>
        );
    }
    componentDidMount() {
        let data=[
            {title: '客服',content:`您已成功完成付款，我们将尽快把“ ${this.state.orderInfo.goodsName} ”送到快递小哥哥手上。`},
            {title: this.state.orderInfo.userName,content:'请尽快安排发货'},
            {title: '客服',content:`商品已为您发出，快递单号为${this.state.orderInfo.kuaiDiId}，请注意查收`},
            {title: this.state.orderInfo.userName,content:'好的'},
        ];
        this.setState({
            chatData:data
        })
    }
}

export default OrderInfo;